<template>
	<div>
		<Tippy
			closable
			width="300"
			height="250"
			title="标题">
			<button>按钮</button>
			<template #content>
				<div style="white-space:pre">
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
					<p>测试内容测试内容</p>
				</div>
			</template>
		</Tippy>
		<Tippy
			closable
			title="标题"
			width="2000"
			:tippy-options="tippyOptions">
			<button>按钮2</button>
			<template #content>
				<div style="white-space:pre-wrap;padding:10px;line-height:40px">
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
					<div>内容内容内容</div>
				</div>
			</template>
		</Tippy>
	</div>
</template>

<script>
import Tippy from '@/components/pc/tippy';
export default {
	name:'index',
	components:{
		Tippy,
	},
	data(){
		return {
			tippyOptions:{
				placement:'left',
				onHide(){
					console.log('onHide');
				},
				onShow(){
					console.log('onShow');
				},
				onHidden(){
					console.log('onHidden');
				},
				onShown(){
					console.log('onShown');
				},
			},
		};
	}
};
</script>

<style lang="scss">

</style>
